<template>
    <view class="tab">
        <view v-for="(item, index) in list" :key="index" class="tab-item">
            <view @click="updateTab(item, index)">
                <image class="tab_img" :src="currentIndex === index ? item.selectedIconPath : item.iconPath"></image>
                <view class="tab_text" :style="{ color: currentIndex === index ? selectedColor : color }">
                    {{ item.text }}</view>
            </view>
        </view>
    </view>
</template>

<script>
    import {
        EventBus
    } from '@/store/eventBus.js';
    import {
        tabBar
    } from '@/utils/tabBar.js';

    export default {
        data() {
            return {
                color: "#666666",
                selectedColor: "#ff72a0",
                list: [],
                currentIndex: 0,
            };
        },
        created() {
            this.initializeTabBar();
            EventBus.$on('updateTab', this.onTabUpdated);
        },
        beforeDestroy() {
            EventBus.$off('updateTab', this.onTabUpdated);
        },
        methods: {
            initializeTabBar() {
                const role = uni.getStorageSync('identify'); // 获取当前用户角色
                this.list = tabBar[role]; // 根据角色获取对应的tab列表
                this.currentIndex = this.determineCurrentTab(); // 自动识别当前索引
            },
            determineCurrentTab() {
                const currentPagePath = this.getCurrentPagePath();
                const index = this.list.findIndex(tab => tab.pagePath === currentPagePath);
                return index !== -1 ? index : 0;
            },
            getCurrentPagePath() {
                const pages = getCurrentPages();
                const currentPage = pages[pages.length - 1];
                return `/${currentPage.route}`; // 格式化路径
            },
            onTabUpdated(index) {
                this.currentIndex = index;
            },
            updateTab(item, index) {
                if (this.currentIndex !== index) {
                    this.currentIndex = index;
                    EventBus.$emit('updateTab', index); // 通知其他页面更新 tab
                }
                this.$nextTick(() => {
                    uni.switchTab({
                        url: item.pagePath
                    });
                });
            }
        }
    };
</script>

<style lang="scss">
    .tab {
        border-top: 1px solid rgb(224, 224, 224);
        position: fixed;
        padding-top: 10px;
        bottom: 0px;
        left: 0;
        right: 0;
        height: 140rpx;
        background: white;
        display: flex;
        justify-content: center;
        align-items: baseline;
        // padding-bottom: env(safe-area-inset-bottom);

        .tab-item {
            flex: 1;
            text-align: center;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;

            .tab_img {
                width: 60rpx;
                height: 60rpx;
            }

            .tab_text {
                font-size: 11px;
                margin-top: -10rpx;
            }
        }
    }
</style>